import React ,{useState}from 'react'
import {Breadcrumb,Row,Col,Table} from "antd"
import style from "./index.module.scss"
import {PlusCircleOutlined} from "@ant-design/icons"
export default function Daikuancailiao() {
    const columns =[
        {
            title: '参数名',
            dataIndex: 'name',
        },
        {
            title: '材料类型',
            dataIndex: 'type',
        },
        {
            title: '可选择值',
            dataIndex: 'num',
        },{
            title:"必填",
            dataIndex:"state",
        },{
            title:"操作",
            dataIndex:"caozuo",
            render:()=>{
                return (<div className={style.do}>
                    <span>添加</span>
                    <span>删除</span>
                </div>)
                
            }
        }
    ]
    const data = [
        {
            key: 1,
            name: '本人姓名',
            type: '输入框',
            num: '-',
            state:'是',
        },{
            key: 2,
            name: '性别',
            type: '选择项（单选）',
            num: '男,女',
            state:'是',
        },{
            key: 3,
            name: '兴趣爱好',
            type: '选择项（多选）',
            num: '运动,旅游,娱乐,炒股,文艺控,腐女',
            state:'否',
        }
    ]
    const [pageSize, setPageSize] = useState('10')
    const [currentPage, setCurrentPage] = useState('1')
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setCurrentPage(page)
        setPageSize(pageSize)
    }


    return (
        <div className={style.canshu}>
            <Breadcrumb style={{ margin: '16px 0',display:"flex",justifyContent:"start"}}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>产品工厂</Breadcrumb.Item>
                <Breadcrumb.Item>产品参数配置</Breadcrumb.Item>
            </Breadcrumb>
            <div className='title'>
                <p>贷款产品参数配置列表</p>
            </div>
            <div className={style.caozuo}>
                <div className={style.add}>
                    <PlusCircleOutlined />添加参数组
                </div>
            </div>

            <Row>
                <Col span={5} className={style.left}>
                    <div className={style.nav}>
                        <div className={style.li}>
                            <span>个人信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>居住信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>资产信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>联系人信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>职业信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>身份信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>银行信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>公司信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>私营业主补充信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>车辆信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>房产信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>其它房产信息</span>
                        </div>
                        <div className={style.lis}>
                            <span>保险信息</span>
                        </div>

                    </div>
                </Col>
                <Col span={19} className={style.right}>
                    <div className={style.rightTitle}>
                        <div>
                            <span className={style.peizhi}>个人信息配置</span>
                            <span className={style.addcanshu}><a href="#">+添加参数项</a></span>
                        </div>
                        <div >
                            <button className={style.btn}>编辑参数组</button>
                            <button className={style.btn}>删除参数组</button>
                        </div>
                    </div>
                    <Table columns={columns} dataSource={data} pagination={{
                            total: data.length,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            pageSizeOptions: ['10', '20', '30'],
                            showTotal: total => `共${Math.ceil(total / pageSize)}页/ ${total} 条数据`,
                            onChange: getPage
                        }}
                            onRow={record => {
                                return {
                                    onClick: event => { console.log(event, record) },
                                }
                            }}
                        />
                </Col>
            </Row>
        </div>
        
    )
}
